<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .adver {
            width: 300px;
            /* height: 400px; */
            background-color: aquamarine;
            /* display: none; */
            /* display: block; */
        }

        .adver-header {
            overflow: hidden;
            line-height: 20px;
            font-size: 13px;
            padding: 0 5px;
        }

        .adver-header .adver-title {
            float: left;
        }

        .adver-header .adver-close {
            float: right;
        }

        .adver-main img {
            width: 100%;
        }
    </style>
</head>

<body>
    <!-- <div class="adver">
        <div class="adver-header">
            <div class="adver-title">距离广告关闭还有10秒</div>
            <div class="adver-close">X</div>
        </div>
        <div class="adver-main">
            <img src="../images/bzsc-dgbhz-300-250-7-5.gif" alt="">
        </div>
    </div> -->
</body>
<script>
    /* 
      动态生成
     (1) 模版字符串动态生成
         优点: 可以根据既定的模版,快速生成html结构
         缺点: 
             模版字符串没有放到页面之前, 就是一个字符串 => 无法给元素绑定事件 =>  先生成 再绑定 
 
         先生成
         body.innerHTML += `<div class="adver">  
             <div class="adver-header">
                 <div class="adver-title">距离广告关闭还有10秒</div>
                 <div class="adver-close">X</div>
             </div>
             <div class="adver-main">
                 <img src="../images/bzsc-dgbhz-300-250-7-5.gif" alt="">
             </div>
         </div>`;
 
         再获取绑定 
         var adver = document.querySelector(".adver");
 
         应用:
         根据模版批量生成  => 二维数组打印表格, 商品列表
 
     (2) DOM创建动态生成
         优点: 创建的元素都是真实的dom元素,可以修改元素的内容,样式,属性, 绑定事件(可以直接操作元素)
         
         缺点: 
             对于复杂的html结构,创建起来麻烦
 
         应用: 
             写插件(小广告插件  分页插件) => 样式和dom生成内部都已经写好了, 只需要调用即可
    
    
    */


    /*  小广告
         页面加载完毕 等待5s 小广告生成
         倒计时10s后关闭小广告
         重复1-2
         点击关闭按钮 => 清除小广告 => 重复 1 2 3 
 
     */

    // 文档对象的属性 (快捷获取htmlbody)
    // document.documentElement   //获取html(元素)
    // document.body     // 获取body(元素)
    // document.head     // 获取head(元素)
    // document.title    // 获取和设置网页标题的内容 (文本内容)

    // console.log(document.documentElement);
    // console.log(document.body);
    // console.log(document.head);
    // console.log(document.title);
    // document.title = "hello";


    var body = document.querySelector("body");


    showAdver("fixed", {
        left: 5,
        bottom: 5,
    });
    showAdver("fixed", {
        left: 5,
        top: 5,
    });
    showAdver("fixed", {
        right: 5,
        bottom: 5,
    });
    showAdver("fixed", {
        right: 5,
        top: 5,
    });

    function showAdver(mode, position,delayTime,adverURL,adverImg) { // {mode, position,delayTime,adverURL,adverImg}
        // mode 定位的模式 (默认 static relative absolute fixed)
        // position => {left,right,top,bottom}   

        var timer = setTimeout(function () {

            var count = 10;

            var adver = document.createElement("div");
            adver.className = "adver";

            switch (mode) {
                case "static":
                    adver.style.position = "static";
                    if (position.left) {
                        adver.style.marginLeft = position.left + "px";
                    }
                    if (position.right) {
                        adver.style.marginRight = position.right + "px";
                    }
                    if (position.top) {
                        adver.style.marginTop = position.top + "px";
                    }
                    if (position.bottom) {
                        adver.style.marginBottom = position.top + "px";
                    }
                    break;
                case "relative":
                case "absolute":
                case "fixed":
                    adver.style.position = mode;
                    if (position.left) {
                        adver.style.left = position.left + "px";
                    }
                    if (position.right) {
                        adver.style.right = position.right + "px";
                    }
                    if (position.top) {
                        adver.style.top = position.top + "px";
                    }
                    if (position.bottom) {
                        adver.style.bottom = position.bottom + "px";
                    }
                    break;
            }



            // adverHeader
            var adverHeader = document.createElement("div");
            adverHeader.className = "adver-header";
            adver.appendChild(adverHeader);

            var adverTitle = document.createElement("div");
            adverTitle.className = "adver-title";
            adverTitle.textContent = `距离广告关闭还有${count}秒`;
            adverHeader.appendChild(adverTitle);

            var adverClose = document.createElement("div");
            adverClose.className = "adver-close";
            adverClose.textContent = `X`;
            adverHeader.appendChild(adverClose);

            adverClose.onclick = function () {
                clearTimeout(timer);
                clearInterval(timer1);
                adver.remove();
                showAdver(mode, position);
            }

            // adverMain
            var adverMain = document.createElement("div");
            adverMain.className = "adver-main";
            adver.appendChild(adverMain);


            var img = document.createElement("img");
            img.src = "../images/bzsc-dgbhz-300-250-7-5.gif";
            adverMain.appendChild(img);

            document.body.appendChild(adver);


            var timer1 = setInterval(function () {
                count--;
                adverTitle.innerText = `距离广告关闭还有${count}秒`;

                if (count == 0) {
                    clearInterval(timer1);
                    adver.remove();

                    showAdver(mode, position);
                }
            }, 1000);




        }, 5000);
    }










</script>

</html>